<template>
  <div class="wallet">
    <!-- <van-pull-refresh v-model="formData.refreshing" @refresh="onRefresh"> -->
    <van-list v-model:loading="formData.loading" :finished="formData.finished" finished-text="没有更多了" @load="onload">
      <div class="item-warp" v-for="(item,index) in recordList" :key="index">
        <van-row justify="space-between" class="notice-warp" @click="GoInfo(item.noticeId)">
          <van-col span="8">
            <div class="img-warp">
              <img :src="item.image" alt="" />
            </div>

          </van-col>
          <van-col class="right" span="16">
            <p>{{item.title}}</p>
            <div v-html="item.content" class="text"></div>
            <span>{{item.createTime}}</span>
          </van-col>
        </van-row>

        <van-empty description="暂无记录" v-if="recordList.length<=0" />
      </div>
    </van-list>
    <!-- </van-pull-refresh> -->

  </div>
</template>
<script>
import { ref, defineComponent, reactive, onMounted, toRefs, nextTick } from "vue";
import { appNoticeList, appNoticeInfo, appNoticeIpage } from "@/api/public";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import { useStore } from "vuex";
export default {
  setup() {
    const router = useRouter()
    const formData = reactive({
      jifen: "0.00",
      refreshing: false,
      loading: false,
      finished: false,
      pageSize: 3,
      pageNum: 1,
      total: 0,
    })
    const recordList = ref([])
    onMounted(() => {
    })
    const onRefresh = () => {
      formData.finished = false
      formData.page = 1
      recordList.value = []
      formData.refreshing = false
      onload()
    }
    const GoInfo = (id) => {
      router.push({
        path: '/NoticeInfo',
        query: {
          id: id
        }
      })
    }
    const onload = async () => {
      const res = await appNoticeIpage(formData)
      formData.loading = false
      formData.pageNum++
      formData.total = res.data.data.total
      recordList.value = recordList.value.concat(res.data.data.records)
      if (formData.total <= recordList.value.length) {
        formData.finished = true;
        console.log('不加载')
      }
      formData.loading = false
    }
    return {
      formData,
      recordList,
      onload,
      onRefresh,
      GoInfo

    }
  }
}

</script>
<style lang="less" scoped>
.item-warp {
  margin: 30px auto 0px;
  width: 708px;
  height: 240px;
  background: #282a2c;
  border-radius: 20px;
  .notice-warp {
    display: flex;
    align-items: center;
    overflow: hidden;

    .right {
      p {
        width: 100%;
        font-size: 32px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 53px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      span {
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: 300;
        color: #b9c4c7;
        line-height: 48px;
      }
      .text {
        height: 87px;
        overflow: hidden;
        line-height: 40px;
        /deep/p {
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          word-break: break-all;
          font-size: 26px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #b9c4c7;
          width: 100%;
        }
        /deep/img {
          display: none;
        }
      }
    }
    .img-warp {
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 200px;
      height: 200px;
      background: linear-gradient(0deg, #161718, #4b4c4d);
      border: 2px solid #ffffff;
      border-radius: 20px;
      img {
        width: 100%;

        height: 100%;
      }
    }
  }
}
</style>